<template>
  <div>
    <h4>发表评论</h4>
    <hr />
    <textarea placeholder="请对本篇文章进行评论(最多可评论120字)" maxlength="120" v-model="msg"></textarea>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" @click="fabiao">发表评论</button>

    <div class="ping">
      <div class="one" v-for='(item , i) in newinf' :key="item.add_time">
        <div class="top">
            <span>第{{i+1}}楼用户：{{item.user_name}}</span>
            <span>发表时间：{{item.add_time|dateFormat}}</span>
        </div>
        <div class="bottom" v-html="item.content">
            
        </div>
      </div>
    </div>
    <mt-button size="large" type='danger' plain @click="getmore">加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";

 export default{
     data(){
         return{
            id:this.$route.params.id,
            newinf:[],
            pageindex:1,
            msg:''
         }
     },
     created(){
         this.getpinglunmessage();
     },
     methods: {
         getpinglunmessage(){
             this.$http
        .get('http://www.liulongbin.top:3005/api/getcomments/'+this.id+'?pageindex='+this.pageindex)
        .then(result => {
          if (result.body.status == 0) {
                    this.newinf=this.newinf.concat(result.body.message)
          } else {
            Toast("内容加载不出来");
          }
        });
         },
         getmore(){
           this.pageindex++,
           this.getpinglunmessage()
         },
         fabiao(){
              this.$http
              .post('http://www.liulongbin.top:3005/api/postcomment/'+this.id,{content:this.msg}, { emulateJSON:true })
              .then(result => {
          if (result.body.status == 0) {
                  var cm={
                    user_name:'匿名用户',
                    add_time:Date.now(),
                    content:this.msg
                  };
                  this.newinf.unshift(cm);
                  this.getpinglunmessage();
                  this.msg=''
          } else {
            Toast("内容加载不出来");
          }
        })
         }
     },
 }
</script>
<style>
.mui-btn-danger,
.mui-btn-negative,
.mui-btn-red {
  opacity: 0.3;
}
.ping{
    font-size: 12px
}
.top{
    background-color: gray;
    display: flex;
    justify-content: space-between
}
textarea{
    margin: 0
}
.mui-btn-block{
    padding: 5px 0
}
.bottom{
    padding: 0 10px
}

</style>
